<template>
  <div class="detail-wrapper">
    <DetailBook :book="bookData"></DetailBook>
    <DetailStat
      :readers="readers"
      :rankAvg="rankAvg"
      :rankNum="rankNum"
      :readerNum="readerNum"
    ></DetailStat>
    <DetailRate
      @onRateChange="onRateChange"
      :rateValue="rateValue"
    ></DetailRate>
    <DetailContents
      @readBook="readBook"
      :contents="contents"
    ></DetailContents>
    <DetailBtn
      :isInShelf="isInShelf"
      @handleShelf="handleShelf"
      @readBook="readBook"
    ></DetailBtn>
  </div>
</template>

<script>
import DetailBook from '../../components/detail/DetailBook'
import DetailStat from '../../components/detail/DetailStat'
import DetailRate from '../../components/detail/DetailRate'
import DetailContents from '../../components/detail/DetailContents'
import DetailBtn from '../../components/detail/DetailBtn'
import { getBookData, setBookRank, getBookContents, getBookIsInShelf, setSaveBookShelf, setRemoveBookShelf } from '../../api/index.js'
import { getStorageSync } from '../../api/wechat'
export default {
  components: { DetailBook, DetailStat, DetailRate, DetailContents, DetailBtn },
  computed: {
    readers () { return this.bookData.readers },
    rankAvg () { return this.bookData.rankAvg },
    rankNum () { return this.bookData.rankNum },
    readerNum () { return this.bookData.readerNum }
  },
  mounted () {
    this.getBookData(this.$route.query.fileName)
  },
  data () {
    return {
      bookData: {},
      rateValue: 0,
      contents: [],
      isInShelf: false
    }
  },
  methods: {
    async getBookData (fileName) {
      const { data: { data } } = await getBookData(fileName)
      this.bookData = data
      this.rateValue = this.bookData.rank
      // console.log(this.bookData)
      this.getBookContents(fileName)
      this.getBookIsInShelf(fileName)
    },
    // 评分改变
    async onRateChange (e) {
      const fileName = this.bookData.fileName
      await setBookRank(fileName, e)
      this.getBookData(fileName)
    },
    // 点击图书目录，进入图书阅读页面
    readBook (nav) {
      if (this.bookData && this.bookData.fileName) {
        this.$router.push({ path: '/pages/read/main', query: { fileName: this.bookData.fileName, opf: this.bookData.rootFile, navigation: nav } })
      }
    },
    // 加入书架，移除书架
    handleShelf () {
      const fileName = this.bookData.fileName
      console.log(fileName)
      if (this.isInShelf) {
        // 已经在书架中，移出书架
        this.setRemoveBookShelf(fileName)
      } else {
        this.setSaveBookShelf(fileName)
      }
    },
    // 移出书架
    setRemoveBookShelf (fileName) {
      const openId = getStorageSync('openId')
      // 移出书架前的确认
      wx.showModal({
        title: '确认移出书架',
        confirmColor: '#3CC51F',
        success: async (result) => {
          if (result.confirm) {
            // 点击确认
            const { data } = await setRemoveBookShelf({ openId, fileName })
            if (data.msg === '移出书架成功') {
              this.isInShelf = false
              this.getBookData(fileName)
            }
          }
        }
      })
    },
    // 将图书保存到书架中
    async setSaveBookShelf (fileName) {
      const openId = getStorageSync('openId')
      const { data } = await setSaveBookShelf({ openId, fileName })
      if (data.msg === '加入书架成功') {
        this.isInShelf = true
        this.getBookData(fileName)
      }
    },
    // 判断图书是否在书架中
    async getBookIsInShelf (fileName) {
      const { data: { data } } = await getBookIsInShelf(fileName)
      if (data.length <= 0) {
        // 图书不在目录中data数组 ，data数组为空
        this.isInShelf = false
      } else {
        this.isInShelf = true
      }
    },
    // 获取图书目录信息
    async getBookContents (fileName) {
      const { data: { data } } = await getBookContents(fileName)
      this.contents = data
    }
  }
}
</script>

<style lang="scss" scoped>
</style>